<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="layout" content="template"/>
<title>Reset Password</title>
<style type="text/css">
	.container h4 {
	  margin: -18px -18px 21px;
	  line-height: 40px;
	  font-size: 15px;
	  font-weight: bold;
	  color: #555;
	  text-align: center;
	  text-shadow: 0 1px white;
	  background: #f3f3f3;
	  border-bottom: 1px solid #cfcfcf;
	 
	  border-right: 1px solid #cfcfcf;
	  border-radius: 3px 3px 0 0;
	  background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
	  background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
	  background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
	  background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
	  -webkit-box-shadow: 0 1px whitesmoke;
	  box-shadow: 0 1px whitesmoke;
}

</style>
</head>
<body>
	 <div class="container">
	 <div class="span4 offset3 panel">
	 <div id="foo"></div>
	 <div id="loadSprinner"></div>
  		<form method="post" action="" id="myForm">
			<h4>Change Password</h4>
			<p>Username: ${username?.username }</p>
			<input type="hidden" value="${username?.id}"/>
				<div class="control-group">
						<label class="control-label" for="inputNewPassword">Enter new password: </label>
						<div class="controls">
							<input type="password" id="newPassword" class="span4" name="newPassword">
						</div>
				</div>
				<div id="checkPassword"></div>
				<div class="control-group">
						<label class="control-label" for="confirmNewPassword">Confirm new password: </label>
						<div class="controls">
							<input type="password" id="confirmNewPassword" class="span4" name="confirmNewPassword">
						</div>
				</div>
				<div id="alertUpdateSuccess"></div>
				
				<input type="submit" id="submitChangePass" class="btn btn-primary" value="Save"/>
				<a class="btn" href= "${createLink(action: 'auth', controller:'login')}" >Cancel</a>
				<div id="updateSuccess" style="margin: 15px 0"></div>
		</form>
		</div>
  </div>
  <script type="text/javascript">
		jQuery(document).ready(function($){
			var opts = {
					  lines: 13, // The number of lines to draw
					  length: 20, // The length of each line
					  width: 10, // The line thickness
					  radius: 30, // The radius of the inner circle
					  corners: 1, // Corner roundness (0..1)
					  rotate: 0, // The rotation offset
					  direction: 1, // 1: clockwise, -1: counterclockwise
					  color: '#000', // #rgb or #rrggbb
					  speed: 1, // Rounds per second
					  trail: 60, // Afterglow percentage
					  shadow: false, // Whether to render a shadow
					  hwaccel: false, // Whether to use hardware acceleration
					  className: 'spinner', // The CSS class to assign to the spinner
					  zIndex: 2e9, // The z-index (defaults to 2000000000)
					  top: 'auto', // Top position relative to parent in px
					  left: 'auto' // Left position relative to parent in px
					};
				var target = document.getElementById('foo');
				var spinner = new Spinner(opts)
			var changePassword = function(id, newPassword, confirmNewPassword){
				 $.ajax({
					url: '${g.createLink(controller:'member', action: 'changeResetPassword')}',
					type: 'GET',	
					dataType: 'json',
					contentType: 'application/json',
					async: false,
					cache: false,
					data: {
						id: id,
						password: newPassword
					},
					beforeSend: function(){
						spinner.spin(target);
					},
					complete: function(completeXml, completeStatus){
						spinner.stop(target);
						
					},
					error: function(errorXml, errorStatus, errorError){
						spinner.stop(target);
						
					},
					success: function(data){
						if(data.checkPasswordUpdate){
							var updatestr = "<div class='alert alert-success'>New password created successfully!</div>";
							$('#updateSuccess').html(updatestr);
							setTimeout(function(){$(location).attr("href","<g:createLink controller='login' action='auth' />")},1000)
							
							
						}
						
					}
				});
			};
			
			$('input[type="submit"]').click(function(){
				function enableButton(){
					spinner.stop(target);
				}
				setTimeout(enableButton,1800);
				
				var id = $('input[type="hidden"]').val();
				var newPassword = $('#newPassword').val();
				var confirmNewPassword = $('#confirmNewPassword').val();
				$('#myForm').validate({
					highlight: function(element,errorClass){
						$(element).fadeOut(function(){
							$(element).fadeIn();
						});
					},
					rules: {
						newPassword: {
							required: true,
							minlength: 6
						},
						confirmNewPassword: {
							required: true,
							equalTo: "#newPassword" 
						}
					},
					messages: {
						newPassword: {
							required: "<div class='alert alert-error'>Please input passwords</div>",
							minlength: jQuery.format("<div class='alert alert-error'>At least {0} charaters required!</div>")
						},
						confirmNewPassword: {
							required: "<div class='alert alert-error'>Please input confirm passwords</div>",
							equalTo: "<div class='alert alert-error'>Please enter the same password as above</div>"
						}
					},
					submitHandler: function(form)
		             {
						changePassword(id, newPassword, confirmNewPassword);
						return false;
		             }
				});
				
				
				
			});
			
			
					
		});
  </script>
</body>
</html>